<template>
  <div class="login-container">
    <div class="login-container__top">
      <slot name="top"></slot>
    </div>
    <div class="login-container__body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login-container',
  props: [
  ],
  components: {
  },
  computed: {
  },
  data () {
    return {

    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss">
@import "~@/css/lib/mixin";
@import "~@/css/common/variables";

.login-container {
  margin: 0 auto;
  width: $login-width;
  height: $login-height;
  position: relative;
  display: flex;
  justify-content: center;
  background-color: $bg-color-login;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  &__top, &__body {
    flex-direction: row;
  }
  &__top {
    position: absolute;
    height: 30px;
    width: 100%;
    z-index: 10;
    top: 0px;
    left: 0px;
  }
  &__body {
    width: 100%;
  }
}
</style>
